<template>
  <div>
    <el-form ref="form" :model="form" label-width="180px">
      <div class="outmain ba_f">
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>第三方配送渠道</span>
          </div>
        </div>
        <div class="flex content clearfix">
          <div class="dis-item mar_r30 mar_b20 flex-col curs">
            <div class="item-top flex">
              <div class="top-left flex dis-flex mar_r15 flex-g-0">
                <img src="../../assets/img/peisong/dada.png" class="dis_bk pic" alt />
              </div>
              <div class="top-right flex-g-1">
                <div class="right-title fon_14 font_w700">达达配送</div>
                <div class="right-content fon_12 color_9">一对一专人急送,1小时送达</div>
              </div>
            </div>
            <div class="item-bottom flex-bt flex-g-1">
              <div class="bottom-content fon_12 color_9">
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>1</div>
                  </div>
                  <div class="flex-g-1">
                    达达官网：
                    <a href="https://www.imdada.cn/" target="_blank" class="color_9">https://www.imdada.cn/</a>
                  </div>
                </div>
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>2</div>
                  </div>
                  <div class="flex-g-1">
                    达达开发平台：
                    <a href="https://newopen.imdada.cn/#/?_k=rbeks9" target="_blank" class="color_9">https://newopen.imdada.cn/#/?_k=rbeks9</a>
                  </div>
                </div>
              </div>
              <div class="as-end">
                <el-switch v-model="form.dadaOpen" active-value="1" inactive-value="2"></el-switch>
              </div>
            </div>
          </div>
          <div class="dis-item mar_r30 mar_b20 flex-col curs">
            <div class="item-top flex">
              <div class="top-left dis-flex mar_r15 flex-g-0">
                <img src="../../assets/img/peisong/dianwoda.png" class="dis_bk pic" alt />
              </div>
              <div class="top-right flex-g-1">
                <div class="right-title fon_14 font_w700">点我达</div>
                <div class="right-content fon_12 color_9">致力于提供城市即时物流配送服务</div>
              </div>
            </div>
            <div class="item-bottom flex-bt flex-g-1">
              <div class="bottom-content fon_12 color_9">
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>1</div>
                  </div>
                  <div class="flex-g-1">
                    点我达官网：
                    <a href="https://www.dianwoda.com/" target="_blank" class="color_9">https://www.dianwoda.com/</a>
                  </div>
                </div>
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>2</div>
                  </div>
                  <div class="flex-g-1">
                    点我达开放平台：
                    <a href="https://open.dianwoda.com/#/" target="_blank" class="color_9">https://open.dianwoda.com/#/</a>
                  </div>
                </div>
              </div>
              <div class="as-end">
                <el-switch v-model="form.dwdOpen" active-value="1" inactive-value="2"></el-switch>
              </div>
            </div>
          </div>
          <div class="dis-item mar_r30 mar_b20 flex-col curs">
            <div class="item-top flex">
              <div class="top-left flex dis-flex mar_r15 flex-g-0">
                <img src="../../assets/img/peisong/shunfeng.png" class="dis_bk pic" alt />
              </div>
              <div class="top-right flex-g-1">
                <div class="right-title fon_14 font_w700">顺丰同城</div>
                <div class="right-content fon_12 color_9">专业，让配送更有温度</div>
              </div>
            </div>
            <div class="item-bottom flex-g-1 flex-bt">
              <div class="bottom-content fon_12 color_9">
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>1</div>
                  </div>
                  <div class="flex-g-1">
                    顺丰官网：
                    <a href="http://sf-cityrush.com/" target="_blank" class="color_9">http://sf-cityrush.com/</a>
                  </div>
                </div>
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>2</div>
                  </div>
                  <div class="flex-g-1">
                    顺丰开发平台：
                    <a href="http://commit-openic.sf-express.com/" target="_blank" class="color_9">http://commit-openic.sf-express.com/</a>
                  </div>
                </div>
              </div>
              <div class="as-end">
                <el-switch v-model="form.sfOpen" active-value="1" inactive-value="2"></el-switch>
              </div>
            </div>
          </div>
          <div class="dis-item mar_r30 mar_b20 flex-col curs">
            <div class="item-top flex">
              <div class="top-left dis-flex mar_r15 flex-g-0">
                <img src="../../assets/img/peisong/fengniao.png" class="dis_bk pic" alt />
              </div>
              <div class="top-right flex-g-1">
                <div class="right-title fon_14 font_w700">蜂鸟即配</div>
                <div class="right-content fon_12 color_9">蜂鸟配送-传递品质生活</div>
              </div>
            </div>
            <div class="item-bottom flex-bt flex-g-1">
              <div class="bottom-content fon_12 color_9">
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>1</div>
                  </div>
                  <div class="flex-g-1">
                    蜂鸟即配官网：
                    <a href="https://fengniao.ele.me/about.html" target="_blank" class="color_9">https://fengniao.ele.me/about.html</a>
                  </div>
                </div>
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>2</div>
                  </div>
                  <div class="flex-g-1">
                    蜂鸟即配开发平台：
                    <a href="https://open.ele.me/" target="_blank" class="color_9">https://open.ele.me/</a>
                  </div>
                </div>
              </div>
              <div class="as-end">
                <el-switch v-model="form.fnOpen" active-value="1" inactive-value="2"></el-switch>
              </div>
            </div>
          </div>
          <div class="dis-item mar_b20 flex-col curs">
            <div class="item-top flex">
              <div class="top-left flex dis-flex mar_r15 flex-g-0">
                <img src="../../assets/img/peisong/shansong.png" class="dis_bk pic" alt />
              </div>
              <div class="top-right flex-g-1">
                <div class="right-title fon_14 font_w700">闪送</div>
                <div class="right-content fon_12 color_9">闪送，一对一急送，拒绝拼单</div>
              </div>
            </div>
            <div class="item-bottom flex-bt flex-g-1">
              <div class="bottom-content fon_12 color_9">
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>1</div>
                  </div>
                  <div class="flex-g-1">
                    闪送官网：
                    <a href="http://www.ishansong.com/" target="_blank" class="color_9">http://www.ishansong.com/</a>
                  </div>
                </div>
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>2</div>
                  </div>
                  <div class="flex-g-1">
                    闪送开发平台：
                    <a href="http://open.ishansong.com/" target="_blank" class="color_9">http://open.ishansong.com/</a>
                  </div>
                </div>
              </div>
              <div class="as-end">
                <el-switch v-model="form.ssOpen" active-value="1" inactive-value="2"></el-switch>
              </div>
            </div>
          </div>
          <div class="dis-item mar_b20 flex-col curs">
            <div class="item-top flex">
              <div class="top-left flex dis-flex mar_r15 flex-g-0">
                <img src="../../assets/img/peisong/shagnjia.png" class="dis_bk pic" alt />
              </div>
              <div class="top-right flex-g-1">
                <div class="right-title fon_14 font_w700">uu跑腿</div>
                <div class="right-content fon_12 color_9">送的更快，做的更多</div>
              </div>
            </div>
            <div class="item-bottom flex-bt flex-g-1">
              <div class="bottom-content fon_12 color_9">
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>1</div>
                  </div>
                  <div class="flex-g-1">
                    uu官网：
                    <a href="https://www.uupt.com/" target="_blank" class="color_9">https://www.uupt.com/</a>
                  </div>
                </div>
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>2</div>
                  </div>
                  <div class="flex-g-1">
                    uu开发平台：
                    <a href="http://open.uupt.com/" target="_blank" class="color_9">http://open.uupt.com/</a>
                  </div>
                </div>
              </div>
              <div class="as-end">
                <el-switch v-model="form.uuOpen" active-value="1" inactive-value="2"></el-switch>
              </div>
            </div>
          </div>
        </div>
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>自配送渠道</span>
          </div>
        </div>
        <div class="flex content clearfix">
          <div class="dis-item mar_r30 mar_b20 flex-col curs">
            <div class="item-top flex">
              <div class="top-left flex dis-flex mar_r15 flex-g-0">
                <img src="../../assets/img/peisong/sjps.png" class="dis_bk pic" alt />
              </div>
              <div class="top-right flex-g-1">
                <div class="right-title fon_14 font_w700">商家配送</div>
                <div class="right-content fon_12 color_9">商家配送</div>
              </div>
            </div>
            <div class="item-bottom flex-bt flex-g-1">
              <div class="bottom-content fon_12 color_9">
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>1</div>
                  </div>
                  <div class="flex-g-1">订单由商家自己安排配送</div>
                </div>
              </div>
              <div class="as-end">
                <el-switch v-model="form.storeOpen" active-value="1" inactive-value="2"></el-switch>
              </div>
            </div>
          </div>
          <div class="dis-item mar_r30 mar_b20 flex-col curs">
            <div class="item-top flex">
              <div class="top-left flex dis-flex mar_r15 flex-g-0">
                <img :src="form.makeIcon" class="dis_bk pic" alt v-if="form.makeIcon" />
                <img src="../../assets/img/peisong/make.png" class="dis_bk pic" alt v-else />
              </div>
              <div class="top-right flex-g-1">
                <div class="right-title fon_14 font_w700">{{form.makeName || '码科配送'}}</div>
                <div class="right-content fon_12 color_9">{{form.makeName || '码科配送'}}</div>
              </div>
            </div>
            <div class="item-bottom flex-bt flex-g-1">
              <div class="bottom-content fon_12 color_9">
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>1</div>
                  </div>
                  <div class="flex-g-1">自建配送系统进行订单配送</div>
                </div>
              </div>
              <div class="as-end">
                <el-switch v-model="form.makeOpen" active-value="1" inactive-value="2"></el-switch>
              </div>
            </div>
          </div>
          <div class="dis-item mar_r30 mar_b20 flex-col curs">
            <div class="item-top flex">
              <div class="top-left flex dis-flex mar_r15 flex-g-0">
                <img :src="form.yunbeiIcon" class="dis_bk pic" alt v-if="form.yunbeiIcon" />
                <img src="../../assets/img/peisong/ybps.png" class="dis_bk pic" alt v-else />
              </div>
              <div class="top-right flex-g-1">
                <div class="right-title fon_14 font_w700">{{form.yunbeiName || '云贝配送'}}</div>
                <div class="right-content fon_12 color_9">{{form.yunbeiName || '云贝配送'}}</div>
              </div>
            </div>
            <div class="item-bottom flex-bt flex-g-1">
              <div class="bottom-content fon_12 color_9">
                <div class="flex-bet mar_b10">
                  <div class="num dis-flex mar_r5 flex-g-0">
                    <div>1</div>
                  </div>
                  <div class="flex-g-1">自建配送系统进行订单配送</div>
                </div>
              </div>
              <div class="as-end">
                <el-switch v-model="form.yunbeiOpen" active-value="1" inactive-value="2"></el-switch>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mar_t20 ba_f pad_20 t_c">
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getConfig, postConfig } from '@/api/setup';
export default {
  created() {
    this.bus.$emit('loading', true);
    this.init();
  },
  data() {
    return {
      form: {
        storeOpen: '1',
        dadaOpen: '2',
        dwdOpen: '2',
        makeOpen: '2',
        yunbeiOpen: '2',
        makeName: '码科配送',
        makeIcon: '',
        yunbeiName: '云贝配送',
        yunbeiIcon: '',
        sfOpen: '2',
        fnOpen: '2',
        ssOpen: '2',
        uuOpen: '2'
      }
    };
  },
  methods: {
    async init() {
      const { data } = await getConfig({ ident: 'delivery' });
      this.form = Object.assign({}, data);
      this.bus.$emit('loading', false);
    },
    submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.form.ident = 'delivery';
          this.form.identName = '配送设置';
          const { msg } = await postConfig(this.form);
          this.$baseMessage(msg, 'success');
          this.init();
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  flex-wrap: wrap;
  padding-left: 15px;
}
.dis-item {
  width: 18%;
  height: 250px;
  background-color: #f8f8f8;
  transition: 0.2s all ease;
  border-radius: 5px;

  .item-top {
    padding: 20px 15px;
    border-bottom: 1px solid #eee;
  }
  .top-left {
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
    // /* align-items: flex-end; */
  }
  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .item-bottom {
    padding: 20px 20px 20px 15px;

    .flex-col {
      display: flex;
      flex-direction: column;
      // /* align-items: flex-end; */
    }
    .bottom-content {
      padding-left: -15px;
      span {
        color: #2d8cf0;
      }
      .num {
        width: 16px;
        height: 16px;
        background-color: #eee;
        border-radius: 50%;
      }
    }
  }
  .pic {
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 4px;
  }
  .dis-flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.dis-item:hover {
  -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.11);
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.11);
}
.as-end {
  align-self: flex-end;
}
.flex-bt {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
